<template>
  <div class="feikuai">
    <div class="header">
      <!-- 左侧返回 -->
      <div class="is-left">
        <a-icon type="left" @click="$router.go(-1)" />
      </div>
      <!-- 中间输入框 -->
      <div>
        <a-input-search
          placeholder="搜索"
          style="width: 200px"
          v-model="search_val"
        />
      </div>
    </div>
    <div class="menu_view">
        <!-- 左侧菜单栏 -->
        <div class="menu_wrap" ref="menuScroll">
            <ul>
                <li :class="{current:currentIndex===index}" v-for="(item, index) in categories" :key="index" @click="selectMenu(index)">
                    {{item.name}}
                </li>
            </ul>
        </div>
        <!-- 右侧产品栏 -->
        <div class="drinks_wrap" ref="drinkScroll">
            <ul>
                <li v-for="(item, index) in categories" :key="index" class="drink-list">
                    <div class="drinks_title">
                        <h3>{{item.name}}({{getItemProductAll(item)}})</h3>
                    </div>
                    <div class="drinks_detail">
                        <ul>
                            <li v-for="(subItem, index) in item.sub_categories" :key="index" class="products">
                                <ul>
                                    <li v-for="(drink, i) in subItem.products" :key="i" >
                                        <img :src="drink.default_image" alt="" :class="{combo:drink.combo_type}">
                                        <div class="drink_info" v-if="!drink.combo_type">
                                            <span class="drink_name">{{drink.name}}</span>
                                            <span class="drink_price">￥{{drink.price/100}}</span>
                                        </div>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
    data() {
        return {
            search_val: "", // 搜索结果
            categories: [], // api请求的页面数据
            menuScroll:"",//左侧菜单的滚动对象
            drinkScroll:"",//右侧产品的滚动对象
            listHeight:[],//存放各个区域的高度
            scrollY:0,//记录右侧当前实际滚动的高度
        }
    },
    watch:{
        search_val(){
            let el=null;
            el = Array.from(this.pageEle).find(item=>{
               return this.search_val !== "" &&item.innerText.indexOf(this.search_val) !== -1;
            });
            if(el){
                this.drinkScroll.scrollToElement(el,250);
            }else{
                this.drinkScroll.scrollTo(0, 0,250);
                this.menuScroll.scrollTo(0, 0,250);
            }
        }
    },
    computed:{
        pageEle(){
            return this.$refs.drinkScroll.getElementsByClassName('drink_name')
        },
        currentIndex(){
            for (let i = 0; i < this.listHeight.length; i++) {
                let h1=this.listHeight[i];
                let h2=this.listHeight[i+1];
                //判断实际高度是否在两个区域高度之间
                if(this.scrollY>=h1&&this.scrollY<=h2){
                    return i;
                }
            }
            return 0;
        }
    },
    methods: {
        getItemProductAll(item){
            let count=0;
            item.sub_categories.forEach(ele => {
                count+=ele.products.length;
            });
            return count;
        },
        initScroll(){
            this.menuScroll=new BScroll(this.$refs.menuScroll,{
                click:true,
            });
            this.drinkScroll=new BScroll(this.$refs.drinkScroll,{
                click:true,
                probeType:3,
            });
            
            this.drinkScroll.on("scroll", (pos) => {
                this.scrollY = Math.abs(Math.round(pos.y));
            });
        },
        selectMenu(index){
            let drinkList=this.$refs.drinkScroll.getElementsByClassName('drink-list');
            let el=drinkList[index];
            //滚动到对应元素的位置
            this.drinkScroll.scrollToElement(el,250);
        },
        calculateHeight(){
            let drinkList=this.$refs.drinkScroll.getElementsByClassName('drink-list');
            //将每一个区的高度添加到一个数组中去
            let height=0;
            this.listHeight.push(height);
            for (let index = 0; index < drinkList.length-1; index++) {
                let item = drinkList[index];
                height+=item.clientHeight;
                this.listHeight.push(height);
            }
        },
    },
    mounted() {
        this.$http.get('/api/getMenu').then(
            res=>{
                this.categories=res.data.data.categories;
                this.$nextTick(()=>{
                    //Dom更新后初始化滚动
                    this.initScroll();
                    //计算一下各个区域的高度
                    this.calculateHeight();
                })
            },
            err=>{}
        );
    },
};
</script>
<style lang="scss" scoped>
.feikuai {
  width: 100%;
  height: 100%;
  .header {
    width: 100%;
    height: 4rem;
    background: $module-color;
    padding: $common-padding;
    display: flex;
    align-items: center;
    i {
      margin-right: $common-margin;
    }
  }
  .menu_view {
    display: flex;
    margin-top: $common-margin;
    box-sizing: border-box;
    overflow: hidden;
    height: calc(100% - 4rem);
    .menu_wrap {
      ul {
        li {
          height: 4rem;
          padding: $common-padding;
          display: flex;
          align-items: center;
        }
      }
    }
    .drinks_wrap {
      background: $module-color;
      padding: $common-padding;
      h3 {
        font-size: 20px;
        font-weight: bolder;
      }
      .drinks_title {
        padding-left: $common-padding;
      }
      .products {
        display: flex;
        img {
          width: 6rem;
          margin-right: $common-margin;
        }
        .drink_info {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          font-size: 16px;
          .drink_name {
            font-weight: bolder;
          }
        }
      }
    }
  }
}

.current {
  background: $module-color;
}
.combo {
  width: 15rem !important;
  margin: 5px;
}
</style>